<!--
 * @Author: Wang WeiHao
 * @Date: 2024-10-12 16:08:48
 * @LastEditors: Wang WeiHao
 * @LastEditTime: 2024-10-17 11:41:54
 * @Description: 
 * @FilePath: \geo-base-dm\src\views\main\ai-processing\analysResult.vue
-->
<template>
	<div class="box">
		<div class="chart">
			<div id="analysechart" style="width: 800px; height: 300px"></div>
		</div>
		<div class="table">
			<el-table
				class="list-table"
				:data="chartsData"
				:header-cell-style="{
					background: '#113659',
					fontWeight: 400,
					color: '#fff',
				}"
				height="300"
				:header-row-style="{ background: '#113659' }"
				:row-style="{ background: '#0a2641' }"
				:cell-style="{ background: '#0a2641', borderBottom: '1px solid #184168', color: '#fff' }"
			>
				<el-table-column type="expand">
					<template #default="{ row }">
						<el-table :data="row.children" style="width: 100%" :show-header="false">
							<el-table-column fixed prop="landcode" label="用地分类编码"> </el-table-column>
							<el-table-column prop="landname" label="用地分类名称"> </el-table-column>
							<el-table-column prop="sumArea" label="总面积(平方千米)"> </el-table-column>
						</el-table>
					</template>
				</el-table-column>
				<el-table-column prop="landcode" label="用地分类编码"> </el-table-column>
				<el-table-column prop="landname" label="用地分类名称"> </el-table-column>
				<el-table-column prop="sumArea" label="总面积(平方千米)"> </el-table-column>
				<!-- <el-table-column :prop="item" :label="item" v-for="(item, index) in labelList" :key="index">
				</el-table-column> -->
			</el-table>
		</div>
	</div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
const props = defineProps<{
	chartsData: Array<any>;
	listData: Array<any>;
}>();
const labelList = ref([]);
onMounted(() => {
	console.log(props.chartsData);

	const chartDom = document.getElementById("analysechart") as HTMLDivElement;
	if (chartDom) {
		let arr = props.chartsData;
		const uniqueKeysSet = new Set();
		arr.forEach((object: any) => {
			// 遍历对象的每个键，并将其添加到Set中
			// 由于Set会自动去重，因此重复的键只会被存储一次
			Object.keys(object).forEach((key) => {
				uniqueKeysSet.add(key);
			});
		});

		// 将Set转换成数组，以便后续使用
		labelList.value = Array.from(uniqueKeysSet);
		console.log(labelList.value);

		const myChart = echarts.init(document.getElementById("analysechart") as HTMLDivElement);
		const option = {
			xAxis: {
				type: "category",
				data: arr.map((item) => item.landname),
				axisLabel: {
					interval: 0, // 强制显示所有标签
				},
			},
			yAxis: {
				type: "value",
			},
			grid: {
				left: "3%",
				right: "0%",
				bottom: "13%",
				containLabel: true,
			},
			dataZoom: [
				{
					show: true,
					height: 12,
					xAxisIndex: [0],
					bottom: "8%",
					start: 10,
					end: 70,
					handleIcon:
						"path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
					handleSize: "110%",
					handleStyle: {
						color: "#d3dee5",
					},
					textStyle: {
						color: "#fff",
					},
					borderColor: "#90979c",
				},
				{
					type: "inside",
					show: true,
					height: 15,
					start: 1,
					end: 35,
				},
			],
			series: [
				{
					data: arr.map((item) => item.sumArea),
					type: "bar",
				},
			],
		};
		myChart.setOption(option);
	}
});
</script>

<style lang="scss" scoped>
.box {
	width: 800px;
	height: 600px;
}
.chart {
	width: 100%;
	height: 50%;
}
.table {
	width: 100%;
	height: 400px; /* 确保高度固定，超过时自动滚动 */
	overflow: auto; /* 超出部分滚动 */
}
.list-table {
	--el-table-border-color: none;
	background-color: transparent;
	@apply w-full;
	.data-tag {
		@apply flex items-center justify-center;
		width: 54px;
		height: 20px;
		background: #276eb7;
		border-radius: 50px 50px 50px 50px;
		&.data-tag-off {
			background: #d77820;
		}
	}
	.el-button {
		margin-right: 12px;
	}
	.el-table__empty-block {
		background-color: #0a2641;
	}
}
</style>
